@import '../global/variables.css';

/*
Input

 Markup:
 <input class="{$modifiers} ring-input" type="text" placeholder="placeholder">

 :disabled            - Disabled state, also available as the `.ring-input_disabled` class name.
 :active              - Active state, also available as the `.ring-input_active` class name.
 :focus               - Focus state, also available as the `.ring-input_focus` class name.
 .ring-input_correct  - The entered value is correct.
 .ring-input_error    - The entered value is incorrect.
 */

:global(.ring-input) {
  /* .heightS */
  --ring-input-padding-block: 1px;
  --ring-input-padding-inline: var(--ring-unit);
  --ring-input-padding-start: var(--ring-input-padding-inline);
  --ring-input-padding-end: var(--ring-input-padding-inline);

  /* stylelint-disable order/properties-order */

  box-sizing: border-box;

  font: inherit;
  font-size: var(--ring-font-size);
  line-height: var(--ring-line-height);

  width: 100%;

  margin: 0;
  padding-top: var(--ring-input-padding-block);
  padding-right: var(--ring-input-padding-end);
  padding-bottom: var(--ring-input-padding-block);
  padding-left: var(--ring-input-padding-start);

  transition: border-color var(--ring-ease);

  color: var(--ring-text-color);
  border: 1px solid var(--ring-borders-color);
  border-radius: var(--ring-border-radius);
  outline: none;
  background-color: var(--ring-content-background-color);

  caret-color: var(--ring-main-color);

  /* stylelint-enable order/properties-order */

  [dir='rtl'] & {
    padding-right: var(--ring-input-padding-start);
    padding-left: var(--ring-input-padding-end);
  }

  &:hover {
    transition: none;

    border-color: var(--ring-border-hover-color);
  }

  .error & {
    border-color: var(--ring-error-color);
  }

  &:focus {
    transition: none;

    border-color: var(--ring-main-color);
  }

  &[disabled] {
    color: var(--ring-disabled-color);
    border-color: var(--ring-border-disabled-color);
    background-color: var(--ring-disabled-background-color);

    -webkit-text-fill-color: var(--ring-disabled-color); /* Required for Safari, see RG-2063 for details */
  }

  /*
    Kill yellow/blue webkit autocomplete
    https://css-tricks.com/snippets/css/change-autocomplete-styles-webkit-browsers/
  */
  &:-webkit-autofill {
    &,
    &:hover,
    &:focus {
      transition: background-color 50000s ease-in-out 0s;
    }
  }
}

:global(.ring-input_error) {
  border-color: var(--ring-error-color);
}

:global(.ring-input_filter-popup) {
  width: 100%;
  min-width: 200px;
}

:global(.ring-input.ring-input:disabled),
:global(.ring-input.ring-input[disabled]),
:global(.ring-input.ring-input_disabled) {
  color: var(--ring-disabled-color);
  border-color: var(--ring-border-disabled-color);
  background-color: var(--ring-disabled-background-color);

  -webkit-text-fill-color: var(--ring-disabled-color); /* Required for Safari, see RG-2063 for details */
}

:global(textarea.ring-input) {
  box-sizing: border-box;

  min-height: calc(8 * var(--ring-unit));

  resize: none;
}

/* https://stackoverflow.com/questions/7144843/extra-space-under-textarea-differs-along-browsers */
:global(.ring-input::placeholder) {
  color: var(--ring-disabled-color);
}
